import React, { useState } from 'react';
import { Space, Table, Tag, Modal, Form, Input, Select, message } from 'antd';
import type { TableProps } from 'antd';

// 定义用户数据类型
interface UserDataType {
  id: number; // 唯一标识
  name: string; // 用户名
  role: string; // 用户角色
  level: number // 用户权限
  last_login: string; // 最后上线时间
  active: boolean; // 用户状态
  from_place: string; // 用户来自
}

interface UserTableProps {
  dataSource: UserDataType[];
  onUpdate?: (user: UserDataType) => void;
  onDelete: (name: string) => void;
}

const UserTable: React.FC<UserTableProps> = ({ dataSource, onUpdate, onDelete }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editingUser, setEditingUser] = useState<UserDataType | null>(null);
  const [form] = Form.useForm();

  const handleEdit = (record: UserDataType) => {
    setEditingUser(record);
    form.setFieldsValue(record);
    setIsModalVisible(true);
  };

  const handleDelete = (record: UserDataType) => {

    onDelete?.(record.name);
  };

  const handleOk = async () => {
    console.log(form.getFieldsValue())
    onUpdate?.(form.getFieldsValue());
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    form.resetFields();
    setEditingUser(null);
  };

  const columns: TableProps<UserDataType>['columns'] = [
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <span className="text-blue-600 hover:text-blue-800">{text}</span>,
    },
    {
      title: '用户角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '用户权限',
      dataIndex: 'level',
      key: 'level',
    },
    {
      title: '归属部门',
      dataIndex: 'from_place',
      key: 'from_place',
    },
    {
      title: '最后上线时间',
      dataIndex: 'last_login',
      key: 'last_login',
    },
    {
      title: '状态',
      key: 'active',
      dataIndex: 'active',
      render: (_, record) => (
        <Tag color={record.active ? 'green' : 'red'}>
          {record.active ? "在线" : "离线"}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <button
            onClick={() => handleEdit(record)}
            className="text-blue-500 hover:text-blue-700 transition-colors"
          >
            编辑
          </button>
          <button
            onClick={() => handleDelete(record)}
            className="text-red-500 hover:text-red-700 transition-colors"
          >
            删除
          </button>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Table<UserDataType> columns={columns} dataSource={dataSource}       
      pagination={{
        showQuickJumper: true,
        showSizeChanger: true,
      }} />

        

      
      <Modal
        title="编辑用户"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            name="name"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="role"
            label="用户角色"
            rules={[{ required: true, message: '请选择用户角色' }]}
          >
            <Select>
              <Select.Option value="学生">学生</Select.Option>
              <Select.Option value="教师">教师</Select.Option>
              <Select.Option value="职工">职工</Select.Option>
              <Select.Option value="校外人员">校外人员</Select.Option>
            </Select>
          </Form.Item>
          
          <Form.Item
            name="level"
            label="用户权限"
            rules={[{ required: true, message: '请选择用户权限' }]}
          >
            <Select
            options={[
              {value: 0, label: '0 - 访客'},
              {value: 1, label: '1 - 普通学生/兼职人员'},
              {value: 2, label: '2 - 骨干学生/校内&周边商户'},
              {value: 3, label: '3 - 教师/行政/职工'},
              {value: 4, label: '4 - 管理员', disabled: true}
            ]}
            >

            </Select>
          </Form.Item>

          <Form.Item
            name="from_place"
            label="归属部门"
            rules={[{ required: true, message: '请输入归属部门' }]}
          >
            <Input />
          </Form.Item>
          
          <Form.Item
            name="active"
            label="状态"
            rules={[{ required: true, message: '请选择用户状态' }]}
          >
            <Select>
              <Select.Option value={true}>在线</Select.Option>
              <Select.Option value={false}>离线</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default UserTable;